<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h2>{{msg}}</h2>
    <h1>v-text</h2>
    <h2 v-text="msg"></h2>
    <h1>v-model</h2>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
    <h1>v-html</h1>
    <p v-html="html"></p>
    <h1>v-on</h1>
    <div v-on:click="clickHandler">点击按钮</div>
    <div v-on:mouseenter="mouseenterHandler">鼠标进入按钮</div>
  </div>

  <script src="./myVue/dep.js"></script>
  <script src="./myVue/watcher.js"></script>
  <script src="./myVue/compiler.js"></script>
  <script src="./myVue/observer.js"></script>
  <script src="./myVue/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: '文本信息',
        count: 0,
        html: `<i>斜体</i><span>span标签</span>`,
        obj: {}
      },
      methods: {
        clickHandler () {
          console.log('触发点击事件')
          this.msg = '点击事件触发文本信息变更'
        },
        mouseenterHandler () {
          console.log('触发鼠标进入事件')
          this.msg = '悬浮事件触发文本信息变更'
        }
      },
    })

    // 初始化后给data动态新增的数据是非响应式的
    vm.$data.newObj = {
      a: 5
    }
    vm.$data.obj.a = 32
  </script>
</body>
</html>